/* eslint-disable object-curly-newline */
import React, { Component } from 'react';
import { Card, Row, Col, Radio } from 'antd';
import baseChar from '../Common/baseChar'; /* 获取图表配置及数据 */
import { Bar, Columnar, ColumnarGroup, BrokenLine, WaterWave, Gauge, ColumnarStack, PieGroup, Pie, TimeLineGroup } from '../Charts';
import styles from '../Charts/index.less';
import * as utils from '../../utils/utils';

class CommonChar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      ...props,
      commonChar: styles.commonChar,
      childChar: styles.childChar,
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ ...nextProps });
  }

  handleChar = (props) => {
    const { sCharType, child } = props;
    let content = '';
    if (utils.isNotEmptyObject(child)) {
      child.height = props.iHeight;
      if (sCharType === 'sBar') {
        /* 横向条形图 */
        content = <Bar {...child} />;
      } else if (sCharType === 'sColumnar') {
        /* 纵向条形图 */
        content = <Columnar {...child} />;
      } else if (sCharType === 'sColumnarGroup') {
        /* 纵向条形图 */
        content = <ColumnarGroup {...child} />;
      } else if (sCharType === 'sBrokenLine') {
        content = <BrokenLine {...child} />;
      } else if (sCharType === 'sWaterWave') {
        content = <WaterWave {...child} />;
      } else if (sCharType === 'sGauge') {
        content = <Gauge {...child} />;
      } else if (sCharType === 'sColumnarStack') {
        content = <ColumnarStack {...child} />;
      } else if (sCharType === 'sPieGroup') {
        content = <PieGroup {...child} />;
      } else if (sCharType === 'sPie') {
        content = <Pie {...child} />;
      } else if (sCharType === 'TimeLineGroup') {
        content = <TimeLineGroup {...child} />;
      }
    }
    return content;
  };

  handleExtra = (menuTypeId) => {
    const { charMenu } = this.state;
    let content = '';
    const index = charMenu.findIndex(item => item.sId === menuTypeId);
    if (index > -1) {
      const { childConfig, radioType } = charMenu[index];
      const props = { ...this.state, index };
      content = (
        <Radio.Group value={radioType} onChange={e => this.handleChangeType(e, props)}>
          {
            childConfig.map((item) => {
              const { sTypeValue, showName, sId } = item;
              return (
                <Radio.Button value={sTypeValue} key={sId}>{showName}</Radio.Button>
              );
            })
          }
        </Radio.Group>);
    }
    return content;
  };

  handleChangeType = (e, props) => {
    const { charMenu, charConfigAndData, index } = props;
    const { childConfig } = charMenu[index];
    const radioType = e.target.value; /* 更改后的菜单 */
    charMenu[index].radioType = radioType;
    this.setState({ charMenu });
    const each = charConfigAndData[index]; /* 当前图表的配置 */
    const child = childConfig.filter(item => item.sType === 'searchType' && item.sTypeValue === radioType);
    if (utils.isNotEmptyArr(child)) {
      const { sName } = child[0];
      each.sSqlCondition = {
        [sName]: radioType,
      };
    }
    this.props.onEachChar(each);
  };

  render() {
    const { charConfigAndData, commonChar, childChar } = this.state;
    return (
      <Row type="flex" className={commonChar} gutter={24}>
        {
          charConfigAndData.map((itemChar) => {
            const { showName, sId, iWidth, iOrder, childConfig } = itemChar;
            const extra = utils.isNotEmptyArr(childConfig) ? this.handleExtra(sId) : null;
            return (
              <Col span={iWidth} key={sId} order={iOrder}>
                <Card id="commonChar" className={childChar} title={showName} extra={extra}>
                  {this.handleChar(itemChar)}
                </Card>
              </Col>
            );
          })
        }
      </Row>
    );
  }
}

export default baseChar(CommonChar);
